<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// @ is an alias to /src

import {LoginRequest} from "@/request/api";

export default {
  data() {
    return {
      username: "",
      password: ""
    }
  },
  name: 'Login',
  components: {
  },
  methods: {
    //点击提交
    onSubmit(values) {
      let username = values["用户名"];//name属性
      let password = values["密码"];
      // console.log("clikc", username, password);
      //发送请求
      LoginRequest({
        // username: this.username,
        // password: this.password
        username,
        password
      }).then(res => {
        //请求到数据
        console.log(res);
        //把token存入localstorage
        localStorage.setItem("token", res.data);
        this.$toast.success("登陆成功");
        //跳转到首页
        setTimeout(() => {
          this.$router.push("/index");
        }, 500);
      }).catch(err => {
        this.$toast.fail("用户名或密码错误");
      });
    }
  }
}

</script>
<style lang="less" scoped>
.login {
  background-color: #FFE500;
  background-image: url("../assets/login_background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  text-align: center;
  .van-button {
    width: 80%;
    margin: 0 auto;
  }
}
.van-field {
  width: 80%;
  margin: 20px auto;
  border-radius: 0.1rem;
}

.van-cell, .van-button {
  font-size: 0.18rem;
}

.van-form {
  padding-top: 127%;
}


</style>
